import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Input, Button, Text, Image } from "@tarojs/components-rn";
import { observer, inject } from "@tarojs/mobx-rn";
import { getRuntime, ServerHost } from "../../utils/common";
import loginStyleSheet from "./login_styles";
import eye from "../../assets/img/icon_01.png";
import eye_on from "../../assets/img/icon_01_on.png";
var _styleSheet = loginStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Login = class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentEye: false,
      eyeImg: eye,
      focus: 'userPhoneNumber',
      //userPhoneNumber: '13629439834',
      userPhoneNumber: null,
      //password: '123456',
      password: null,
      isComplete: true,
      passwordType: 'password'
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '登录' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  // input聚焦
  inputFocus(type = 'phoneNumber') {
    this.setState({
      focus: type
    });
  }
  toggleEye() {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let eyeImg = this.state.currentEye ? eye_on : eye;
      let passwordType = this.state.currentEye ? 'text' : 'password';
      this.setState({
        eyeImg,
        passwordType
      });
    });
  }
  inputUserPhoneNumberChange(e) {
    this.setState({
      userPhoneNumber: e.target.value
    }, () => {
      if (this.state.userPhoneNumber && this.state.password > 0) {
        this.setState({
          isComplete: false
        });
      } else {
        this.setState({
          isComplete: true
        });
      }
    });
  }
  inputPasswordChange(e) {
    this.setState({
      password: e.target.value
    }, () => {
      if (this.state.userPhoneNumber.length > 0 && this.state.password.length > 0) {
        this.setState({
          isComplete: false
        });
      } else {
        this.setState({
          isComplete: true
        });
      }
    });
  }
  handelSubmit() {
    const { stores: { userStore } } = this.props;
    let { userPhoneNumber, password } = this.state;
    if (!userPhoneNumber) {
      getRuntime().showToast('用户名不能为空~');
      return;
    }
    if (!password) {
      getRuntime().showToast('密码不能为空~');
      return;
    }
    userStore.userLogin({
      form: {
        userPhoneNumber,
        password
      },
      callback: res => {
        // 获取用户授权
        getRuntime().setUserInfo(res);
        let url = ServerHost + '/api/Account/GetWechatCode';
        window.location.href = url;
        // this.getScope()
        // getRuntime().navigateBack();
      }
    });
  }
  getScope() {
    let url = ServerHost + '/api/Account/GetWechatCode';
    fetch(url).then(response => {
      return response.json();
    }).then(res => {
      console.log(res);
    }).catch(e => {
      console.error(e);
    });
  }
  render() {
    let { eyeImg, focus, isComplete, passwordType } = this.state;
    return <View style={_styleSheet["login-wrap"]}>
       <View>
         <Text style={_styleSheet["title"]}>欢迎您登录建务通</Text>
         <View style={_getStyle(focus === 'userPhoneNumber' ? 'input-group input-group-on' : 'input-group')}>
           <Text style={_styleSheet["input-title"]}>手机号</Text>
           <Input autoFocus type="number" placeholderClass="placeholder-class" placeholder="请输入11位手机号" maxLenght="11" name="userPhoneNumber" onFocus={this.inputFocus.bind(this, 'userPhoneNumber')} onChange={this.inputUserPhoneNumberChange.bind(this)} style={_styleSheet["input"]} />
         </View>
         <View style={_getStyle(focus === 'password' ? 'input-group input-group-on' : 'input-group')}>
           <Text style={_styleSheet["input-title"]}>密码</Text>
           <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={passwordType} name="password" onFocus={this.inputFocus.bind(this, 'password')} onChange={this.inputPasswordChange.bind(this)} style={_styleSheet["input"]} />
           <Image src={eyeImg} onClick={this.toggleEye.bind(this)} style={_styleSheet["eye"]} />
         </View>

         <Button type="default" disabled={isComplete} onClick={this.handelSubmit.bind(this)} style={_getStyle(isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on')}>立即登录</Button>
       </View>

        <View style={_styleSheet["protocol"]}>
          <Text onClick={this.handelRouter.bind(this, '/pages/login/forget_password')}>忘记密码</Text>
          <Text style={_styleSheet["split"]}>|</Text>
          <Text onClick={this.handelRouter.bind(this, '/pages/login/register_step_one')} style={_styleSheet["protocol-text"]}> 新用户注册 </Text>
        </View>
      </View>;
  }
};
Login = tslib_1.__decorate([inject("stores"), observer], Login);
export default Login;